<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历详情</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__assets/css/official/enter/base.css" />
    <style>
        body {
            margin-bottom: 3rem;
        }

        .container {
            /* background: pink; */
            width: 100%;
        }

        .top-container {
            /* background: plum; */
            width: 100%;
            padding: 0.5rem;
        }

        .top-container .top-name {
            /* background: powderblue; */
            width: 100%;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px #ddd solid;

        }

        .top-container .top-name .has-tit {
            width: 70%;
            height: 100%;
        }

        .top-container .top-name .has-tit .has-name {
            font-size: 1.33em;
            font-weight: bold;
            padding: 0.7rem 0rem 0.3rem 0rem;
        }

        .top-container .top-name .has-img {
            width: 4rem;
            height: 4rem;
            /* background: rosybrown; */
            margin-right: 2rem;
        }

        .top-container .top-name .has-img img {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            padding: 0.15rem;
        }

        .top-container .top-main {
            /* background: royalblue; */
            width: 100%;
            display: flex;
            justify-content: flex-start;
            padding-bottom: 1rem;
            border-bottom: 1px #ddd solid;
        }

        .top-container .top-main .left-box {
            width: 50%;
        }

        .top-container .top-main .left-box p {
            padding: 1rem 0rem 0rem 0rem;
        }

        .top-container .top-main .right-box {
            width: 50%
        }

        .top-container .top-main .right-box p {
            padding: 1rem 0rem 0rem 0rem;
        }

        .main-container {
            width: 100%;
            padding: 0rem 0.5rem 0rem 0.5rem;
        }

        .main-container .has-border {
            border-bottom: 1px #ddd solid;
            padding-bottom: 1em;
            padding-top: 1em;
        }

        .main-container .has-border h3 {
            display: block;
            font-size: 1.17em;
            margin-block-start: 0em;
            margin-block-end: 0em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
            padding-bottom: 0.3em;
        }

        .main-container .has-video {
            padding-top: 0em;
            padding-bottom: 1em;
            width: 100%;
            min-height: 8rem;
            position: relative;
        }

        .main-container .has-video .tips {
            color: red;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 50%;
            transform: translateX(-50%);
        }

        .main-container .has-border .main-content {
            display: flex;
            justify-content: space-between;
        }

        .has-p {
            color: #888888;
            word-break: break-all;
        }

        .has-tag {
            border: 1px #888 solid;
            font-size: 10px;
            padding: 0.1em 0.2em 0.1em 0.2em;
            border-radius: 8px;
            color: #888;
            white-space: nowrap;
            display: inline-block;
            margin-bottom: 2px;
        }

        .tool-bar {
            width: 100%;
            height: 3rem;
            position: fixed;
            background: #fff;
            bottom: 0px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .btn-box .btn {
            background-color: #169bd4;
            border: none;
            padding: 10px;
            color: #fff;
            width: 5rem;
            /* font-size: 15px; */
            /* margin: 25px auto; */
            border-radius: 7px;
        }

        .show {
            display: block;
        }

        .hidden {
            display: none;
        }

        .main-container .has-mate .has-img {
            width: 5rem;
            height: 5rem;
            background: peru;
            display: inline-block;
        }

        /* 全屏相框开始 */
        #fullPage {
            display: none;
            background: black;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 19930428;
        }

        #fullPage img {
            display: block;
            width: 100%;
        }

        #canvas {
            width: 100%;
            height: 100%;
            background: none;
            display: block;
        }

        /* 全屏相框结束 */
    </style>
</head>

<body>
    <div class="container">
        <div class="top-container">
            <div class="top-name">
                <div class="has-tit">
                    <p class="has-name">{$resume.nickname}</p>
                    <p class="has-sex">{$resume.sex}</p>
                </div>
                <div class="has-img">
                    <img id="head" src="{$resume.avatar}" />
                </div>
            </div>
            <div class="top-main">
                <div class="left-box">
                    <p>学校：{$resume.school_name}</p>
                    <p>电话：{$resume.tel}</p>
                    <p>邮箱：{$resume.mail}</p>
                </div>
                <div class="right-box">
                    <p>学历：{$resume.education}</p>
                    <p>专业：{$resume.major}</p>
                    <p>毕业年份：{$resume.graduation_year}</p>
                </div>
            </div>
        </div>
        <div class="main-container">
            <div class="has-video has-border">
                <h3>视频简历</h3>
                <div class="has-video" style="background:#F9F9F9 ;">
                    {if !empty($resume['suffix'])}
                    <video width="100%" style="height: 150px;" controls>
                        <source src="{$resume.enclosure}" type="video/mp4">
                    </video>
                    {else}
                    <div class="show tips">无视频简历</div>
                    {/if}
                </div>

            </div>
            <div class="has-light has-border">
                <h3>我的亮点</h3>
                <p class="main-content has-p">{$resume.self_description}</p>
            </div>
            <div class="has-job has-border">
                <h3>求职意向</h3>
                <div class="main-content">
                    <div class="left-content">
                        <p class="has-tit">{$resume.work_nature}{$resume.work_place}</p>
                        <p class="has-p">{$resume.company}</p>
                    </div>
                    <div class="other-content">
                        <p class="has-p">{$resume.gross_pay_max}k~{$resume.gross_pay_small}k</p>
                    </div>
                </div>
            </div>
            <div class="has-skill has-border">
                <h3>技能标签</h3>
                {foreach name = "resume['professional_skills']" item = 'v'}
                <span class="has-tag">{$v}</span>
                {/foreach}
            </div>
            <div class="has-edu has-border">
                <h3>教育背景</h3>
                <div class="main-content">
                    {foreach name = "resume['education_experience']" item = 'v'}
                    <div class="left-content">
                        <p class="has-tit">{$v.name}</p>
                        <p class="has-p">{$v.beg_tine}~{$v.end_time}</p>
                    </div>
                    <div class="other-content">
                        <p class="has-p">{$v.content}</p>
                    </div>
                    {/foreach}
                </div>
            </div>
            <div class="has-exp has-border">
                <h3>实践经历</h3>
                <div class="main-content">
                    {foreach name = "resume['practice_experience']" item = 'v'}
                    <div class="left-content">
                        <p class="has-tit">{$v.name}</p>
                        <p class="has-p">{$v.beg_tine}~{$v.end_time}</p>
                    </div>
                    <div class="other-content">
                        <p class="has-p">{$v.content}</p>
                    </div>
                    {/foreach}
                </div>
            </div>
            <div class="has-award has-border">
                <h3>荣誉奖励</h3>
                <div class="main-content">
                    {foreach name = "resume['honor_experience']" item = 'v'}
                    <div class="left-content">
                        <p class="has-tit">{$v.name}</p>
                        <p class="has-p">{$v.beg_tine}</p>
                    </div>
                    <div class="other-content">
                        <p class="has-p">{$v.content}</p>
                    </div>
                    {/foreach}
                </div>
            </div>
            <div class="has-mate has-border">
                <h3>证明材料</h3>
                <div id="imgBox">
                    {foreach name = "resume['attachment']" item = 'v'}
                    <img class="has-img" id="img" src="{$v}" />
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
    <div class="tool-bar">
        
        {if $name == '全部' || $name == '已收藏'}
        <div class="btn-box">
            <button class="btn " id="invite">邀请投递</button>
            <button class="btn hidden" style="background:#999999;" id="invite_1">已邀请</button>
        </div>
        {/if}
        {if $name == '全部'}
        <div class="btn-box">
            <button class="btn " onclick="collect()" id="collect">收藏</button>
            <button class="btn hidden" style="background:#999999;" id="collect_1">已收藏</button>
        </div>
        {/if}
    </div>
    <div id="fullPage">
        <canvas id="canvas"></canvas>
    </div>
    <script src="__CDN__/assets/js/photo.js" type="text/javascript" charset="utf-8"></script>
    <script src="__CDN__/assets/js/picker.min.js"></script>
    <script type="text/javascript">
        //使用方法
        var wxScale = new WxScale({
            fullPage: document.querySelector("#fullPage"),
            canvas: document.querySelector("#canvas")
        });

        var imgBox = document.querySelectorAll("#imgBox img");
        for (var i = 0; i < imgBox.length; i++) {
            imgBox[i].onclick = function (e) {
                wxScale.start(this);   //这里的this指向需要放大的这张图片
            }
        }
        function communicate() {
            alert("聊聊吧")
        }
        function collect() {
            $.ajax({
                type: "POST",
                url: "{:url('collection')}",
                data: {user_id:'{$resume.user_id}'},
                success: function (res) {
                    // if (res.code === 1){
                    //
                    // }else {
                    //     alert(res.msg);
                    // }
                    $("#collect").addClass('hidden');
                    $("#collect_1").removeClass('hidden');
                }
            });
        }
        var jobdata = [//投递邀请的picker的列表数据
            {
                text: '小',
                value: 3
            }, {
                text: '猪',
                value: 4
            }
        ];
        var work = '{$work}';
        var jobdata = JSON.parse(work);
        var nameEl = document.getElementById('invite');
        var picker = new Picker({
            data: [jobdata],
            selectedIndex: [0],
        });
        picker.on('picker.select', function (selectedVal, selectedIndex) {
            var job = jobdata[selectedIndex[0]].text;
            var value = jobdata[selectedIndex[0]].value;
            console.log('job: ', job);
            $.ajax({
                type: "POST",
                url: "{:url('invitation_user')}",
                data: { data: value,resume_id:'{$resume.resume_id}',user_id:'{$resume.user_id}',school_id:'{$resume.school_id}'},
                success: function (res) {
                    // if (res.code === 1){
                    //
                    // }else {
                    //     alert(res.msg);
                    // }
                    $("#invite").addClass('hidden');
                    $("#invite_1").removeClass('hidden');
                }
            });
        })
        nameEl.addEventListener('click', function () {
            picker.show();//控制picker可见性
        });
    </script>
</body>


</html>